<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--
  实际像素、设备独立像素、cssPX = 逻辑像素、物理像素、设备像素、手机像素密度 宽度=可视宽度
  物理像素：开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少
  设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio
  不同手机浏览器布局视口不同。实际像素=布局视口!=逻辑像素
      而缩放的尺寸就是基于屏幕的宽度来的，也就起到了和width=device-width同样的效果。
  进行媒体查询的时候，查询的宽度值其实也是布局视口的宽度值
  content属性值 :
    width:可视区域的宽度，值可为数字或关键词device-width
    height:同width
    initial-scale=1 的意思是初始缩放的比例是1 会将布局视口的尺寸设置为缩放后的尺寸。(解决ie)
    intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
    maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
    maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
    user-scalable:是否可对页面进行缩放，no 禁止缩放
-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>布局</title>
  <style>
    /* 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
        弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。弹性子元素浮动通常无效*/
    div {
      width: 30px;
      height: 30px;
      border: 1px solid black;
    }

    /*弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
        direction   修改排列方式 rtl(right-to-left) ltr(left-to-right) inherit继承
        flex-direction 顺序指定了弹性子元素在父容器中的位置。
            row             从左到右 （默认）
            row-reverse     从右到做  (最先写的在最右面)
            column          从上到下  (最先写的在最上面)
            column-reverse  从下到上  (最先写的在最下面)
        flex-wrap  属性用于指定弹性盒子的子元素换行方式。
            nowrap         不换行 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器
            wrap           换行 多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
            wrap-reverse   换行，且从最底下开始排，
        justify-content  横向的对齐方式 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线
            flex-start      左对齐 （默认）弹性子元素会向左挤并缩小挤在一行 不换行
            flex-end        右对齐 弹性子元素会向左挤并缩小挤在一行 不换行
            center          居中 弹性子元素会向中间挤并缩小挤在一行 不换行
            space-between   两端对齐 弹性子元素左右margin值一样 不换行
        align-items 纵向的对其方式 弹性盒子元素在侧轴（纵轴）方向上的对齐方式
            stretch	默认值。元素被拉伸以适应容器。
            flex-start   顶部对齐 （默认）元素在下面
            flex-end     底部对齐   元素在下面
            center       上下居中   元素在下面
        align-content  当子元素有多行时的排版方式 用于修改 flex-wrap 属性的行为。不是设置弹性子元素的对齐，而是设置各个行的对齐
            flex-start  从上到下 各行向弹性盒容器的起始位置堆叠(挤)
            flex-end   从下到上 各行向弹性盒容器的结始位置堆叠(挤)
            center  上下居中 从下到上 各行向弹性盒容器的中间位置堆叠(挤)
            space-between  上下两端 各行在弹性盒容器中平均分布
            space-around   元素的上下边距是一样的 各行在弹性盒容器中平均分布
            stretch  默认的 各行将会伸展以占用剩余的空间
            */
    .div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      /*direction: inherit;*/
      /*flex-direction: column-reverse;*/
      flex-wrap: wrap;
      /*justify-content: space-around;*/
      /*align-items:center;*/
      align-content: space-around;
    }

    /*   弹性子元素属性
         order      排列顺序 数值越小越靠前 可以为负值 默认为0
         margin     设置为"auto"值，自动获取弹性容器中剩余的空间  margin: auto;上下左右全居中
         align-self 弹性元素自身在侧轴（纵轴）方向上的对齐方式。给单独一个子元素排版方式
            auto        计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'
            flex-start   元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
		        flex-end    元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
		        center      元素在该行的侧轴（纵轴）上居中放置 如该行的尺寸小于元素的尺寸，则会向两个方向溢出相同的长度
		        baseline    如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
		        stretch 如值为'auto'，则会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
       flex 属性用于指定弹性子元素如何分配空间 默认值为0 1 auto 1原始大小 2如果有剩余放大，最多2倍 0.5如果不够就缩小，最多0.5倍
          none：        none关键字的计算值为: 0 0 auto
          auto	     与 1 1 auto 相同。
          flex-grow    定义弹性盒子元素的扩展比率。放大比例  默认是0   当有放大空间的时候，值越大，放大的比例越大
          flex-shrink  定义弹性盒子元素的收缩比率。缩小比例  默认是1  值越大，缩小的时候比例越小
          flex-basis   定义弹性盒子元素的默认基准值。在分配多余空间之前，项目占据的主轴空间,
                    浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
            */
    .div8 {
      /*order: -1;*/
      /*margin: auto;*/
      /*align-self: flex-start;*/
      /*flex: 2;*/ /* 三个属性的集合都为2*/
      flex-basis: 100px; /*如果项目有多余的空间，设置为200px。那么会放大到200的宽度；*/
    }
  </style>
</head>
<body>

<div class="div div1">
  <!--<div>1</div>-->
  <!--<div>2</div>-->
  <!--<div>3</div>-->
  <!--<div>3</div>-->
  <!--<div>3</div>-->
  <!--<div>2</div>-->
  <div>3</div>
  <div class="div8">8</div>
</div>
</body>
</html>